<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
    <style>
        .div {
            margin-top: 30px;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="div" id="app">
        <div class="ui action input" style="margin-right: 50px;">
            <input type="text" placeholder="搜索..." class="selectInput" v-model="msg">
            <button class="ui icon button teal" @click="onFind"><i class="search icon"></i></button>
        </div>
        <!-- 单选 -->
        <div  v-for="sexInfo in radioSex">
            <label><input type="radio" name="sex" :value="sexInfo.value" v-model="filterSex">{{sexInfo.label}}</label>

        </div>
        <!-- 显示信息页面 -->
        <div class="ui items">
            <div class="item" v-for="person in getGender">
                <a class="ui tiny image"><img :src="person.img"></a>
                <div class="content">
                    <a class="header">{{person.name}}({{person.sex=='m'?'男':'女'}})</a>
                    <div class="description">
                        <p>{{person.des}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui basic buttons">
            <button class="ui button" v-for="num in 6" @click="page=num">{{num}}</button>

        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="./mock.js"></script>
    <script src="./mock-ajax.js"></script>
    <script>
        var app = Vue.createApp({
            data: function () {
                return {
                    msg: '',
                    filterSex: '',
                    page: 1,
                    personList: [],
                    radioSex: [
                        { value: 'm', label: '男' },
                        { value: 'f', label: '女' },
                        { value: '', label: '全部' }
                    ],
                    arr:[]
                }
            },
            methods: {
                onFind() {
                    this.personList = this.personList.filter((person) => person.name.indexOf(this.msg) != -1);
                }
            },

            computed: {
                getGender() {
                    if (this.filterSex == '') return this.personList;
                    return this.personList.filter((person) => person.sex == this.filterSex);
                }
            },

            // 侦听器
            watch: {
                /* page(val,oval){
                    console.log('新值:',val);
                    console.log('旧值:',oval);
                } */

                //计算属性，侦听，-->创建阶段（数据劫持）
                page: {
                    async handler(val, oval) {
                        let res = await axios.get('/user', { page: val });
                        this.personList = res.data
                        console.log(this.personList);
                    },
                    //即时回调
                    immediate: true,
                },
                
            }

        }).mount('#app')
    </script>
</body>

</html>